<template>
  <div class="home">
    <nav>
      <div class="onenav" >
        <router-link :to="{ name: 'home' }" exact
          ><img src="../assets/看.png" alt=""
        /></router-link>
        <router-link :to="{ name: 'home' }" exact>推荐 </router-link>
        <router-link :to="{ name: 'about' }">排行 </router-link>
        <router-link
          :to="{
            name: 'classify',
            query: {
              style: '-1',
              area: '-1',
              finish: '-1',
              free: '-1',
              order: '0',
            },
          }"
          >分类
        </router-link>
      </div>
      
    </nav>
    
    <section>
      <router-view />
    </section>

    <!-- <footer v-if="true">
      <div class="btn">
        <button>×</button>
      </div>
      <div class="imge">
        <img src="../assets/看.png" alt="" />
      </div>
      <div class="con">
        <p>更多精彩内容</p>
        <p>尽在哔哩哔哩漫画</p>
      </div>
    </footer> -->
  </div>
</template>
  
  <script>
// @ is an alias to /src
//   import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Atuoplay",
  components: {
    //   HelloWorld,
  },
  data() {
    return {
      num: 0,
      
    };
  },
  methods: {
    // isShow(){
    //   // if(this.num==0){
    //   //   this.num=1;
    //   // }else{
    //   //   this.num=0
    //   // }
    //   // this.$router.push({name:'home',query:{num:'0'}})
    // }
  },
  created() {},
  updated(){
    // this.num=this.$route.query.num
  }
};
</script>
  <style lang="scss" scoped>
.home {
  width: 100%;
  height: 1000px;
}

nav {
  position: fixed;
  top: 0%;
  left: 0;
  background-color: #fff;
  padding-left: 10px;
  width: 100%;
  height: 46px;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  z-index: 100;
  .onenav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 46px;
    width: 100%;
    max-width: 600px;
    a {
      // height: 46px;
      // line-height: 46px;
      font-weight: bold;
      color: #999;
      text-decoration: none;
      margin-right: 20px;
      font-size: 14px;
      img {
        width: 26px;
        height: 26px;
        vertical-align: middle;
      }
      &.on {
        color: #ff5f8c;
      }
    }
    
  }
  .twonav{
    width: 100%;
    height: 46px;
    line-height: 46px;
    position: relative;
      span{
        position: absolute;
        top:15px;
        left: 5px;
        display: block;
        width: 12px;
        height: 12px;
        border-left: 3px solid #ccc;
        border-top: 3px solid #ccc;
        transform: rotate(-45deg);
      }
      p{
        font-size: 16px;

      }
    }
  a,
  a:hover,
  a:focus {
    -webkit-tap-highlight-color: transparent;
  }
}
section {
  width: 100%;
  margin: 0 auto;
  margin-top: 46px;
  // padding: 10px;
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
  .btn {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    margin-right: 10px;
    button {
      background-color: transparent;
      border: 0;
      color: #fff;
      font-size: 18px;
    }
  }
  .imge {
    margin-right: 10px;
    img {
      width: 38px;
    }
  }
  .con {
    color: #fff;
    p {
      font-size: 12px;
    }
  }
}
</style>